<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/main.css" />
		<script type="application/javascript">
			function $(id){
				return document.getElementById(id);
			}
			var errorMessage = undefined;

			function BwTable(wrap){
				this.wrap = (wrap == undefined) ? true : wrap;
				this.rows = new Array();
				this.header = [];

				this.setHeader = function(row){
					this.header = row;
				}

				this.addRow = function(row){
					this.rows.push(row);
				}

				this.getRow = function(index){
					return this.rows[index];
				}

				this.countRows = function(){
					return this.rows.length;
				}

				this.getTableHTML = function(){
					let a = '';
					if(this.wrap){
						a += '<table class="bwTable">\n';
					}
					a += this.getHeaderHTML();

					for(let row in this.rows){
						a += this.getRowHTML(this.rows[row]);
					}
					if(this.wrap){
						a += '</table>\n';
					}

					return a;
				}

				this.getHeaderHTML = function(){
					if(this.header.length == 0) return '';

					let a = '<tr>';
					for(let cell in this.header){
						a += '<th>' + this.header[cell] + '</th>';
					}

					a += '</tr>\n';
					return a;
				}

				this.getRowHTML = function(row){
					let a = '<tr>';
					for(let cell in row){
						let v = row[cell];
						if(v == null){
							v = '<span class="red">NULL</span>';
						}
						a += '<td>' + v + '</td>';
					}
					a += '</tr>';
					return a;
				}

				this.writeTalbe = function(){
					document.write(this.getTableHTML());
				}
			}

			function dispError(message){
				errorMessage = '<p class="error">' + message + '</p>';
			}

			let t = new BwTable();
			const db = getLocalStorage() || disError('not support local Storage');

			function getLocalStorage(){
				try{
					if(!!window.localStorage){
						return window.localStorage;
					}
				}catch(e){
					return undefined;
				}
			}

			function dispResults() {
				if(errorMessage){
					$('results').innerHTML = errorMessage;
					return;
				}

				t = new BwTable();
				t.addRow(['traveler', db.getItem('traveler')]);
				t.addRow(['destination', db.getItem('destination')]);
				t.addRow(['transportation', db.getItem('transportation')]);

				$('results').innerHTML = t.getTableHTML();
			}

			function dbGo(){
				if(errorMessage){
					return;
				}

				let f = $('travelForm');

				db.setItem('traveler', f.elements['traveler'].value);
				db.setItem('destination', f.elements['destination'].value);
				db.setItem('transportation', f.elements['transportation'].value);

				dispResults();
			}

			function dbClear(){
				if(errorMessage){
					return;
				}

				db.clear();
				dispResults();
			}

			window.onload = function(){
				dispResults();
			}
		</script>

	</head>
	<body>
		<section id="content">
			<h1>localStorge</h1>
			<form id="travelForm">
				<table class="form">
					<tr>
						<td class="label"> Traveler </td>
						<td><input type="text" name="traveler" /></td>
					</tr>
					<tr>
						<td class="label"> Destination </td>
						<td><input type="text" name="destination" /></td>
					</tr>
					<tr>
						<td class="label"> Transportation </td>
						<td><input type="text" name="transportation" /></td>
					</tr>
					<tr>
						<td colspan="2" class="button">
							<input id="formSubmit" type="button" value="Clear" onclick="dbClear()"/>
							<input id="fromSubmit" type="button" value="Go" onclick="dbGo()"/>
						</td>
					</tr>
				</table>
				<input id="inputAction" type="hidden" name="action" value="add" />
				<input id="inputKey" type="hidden" name="key" value="0" />
			</form>
		</section>
		<section id="results">

		</section>
	<div><script language="javascript">

	</script></div></body>
</html>
